<template>
    <view>
        <!-- 搜索 list -->
        <view v-for="(list, idx) in lists" :key="idx" :id="'uni-indexed-list-' + idx">
            <indexed-list-item :list="list" :loaded="loaded" :idx="idx" :showSelect="showSelect" @itemClick="onClick"
                :showLetter="false"></indexed-list-item>
        </view>
    </view>
</template>
<script>
import indexedListItem from './uni-indexed-list-item.vue'
export default {
    name: 'UniIndexedList',
    components: {
        indexedListItem
    },
    emits: ['click'],
    props: {
        options: {
            type: Array,
            default() {
                return []
            }
        },
        showSelect: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            lists: [],
            winHeight: 0,
            itemHeight: 0,
            winOffsetY: 0,
            touchmove: false,
            touchmoveIndex: -1,
            scrollViewId: '',
            touchmovable: true,
            loaded: false,
        }
    },
    watch: {
        options: {
            handler: function () {
                this.setList()
            },
            deep: true
        }
    },
    mounted() {
        setTimeout(() => {
            this.setList()
        }, 50)
        setTimeout(() => {
            this.loaded = true
        }, 300);
        this.getClineHeight()
    },
    methods: {
        setList() {
            let index = 0;
            this.lists = []
            this.options.forEach((value, index) => {
                console.log(value);
                // if (value.data.length === 0) {
                //     return
                // }
                // let indexBefore = index
                // let items = value.data.map(item => {
                //     let obj = { ...item, key: value.letter, name: item.name, itemIndex: index }
                //     index++
                //     obj.checked = item.checked ? item.checked : false
                //     return obj
                // })
                this.lists.push({
                    // title: value.letter,
                    // key: value.letter,
                    items: [value],
                    // itemIndex: indexBefore
                })
            })
        },
        onClick(e) {
            let {
                idx,
                index
            } = e
            let obj = {}
            for (let key in this.lists[idx].items[index]) {
                obj[key] = this.lists[idx].items[index][key]
            }
            let select = []
            if (this.showSelect) {
                this.lists[idx].items[index].checked = !this.lists[idx].items[index].checked
                this.lists.forEach((value, idx) => {
                    value.items.forEach((item, index) => {
                        if (item.checked) {
                            let obj = {}
                            for (let key in this.lists[idx].items[index]) {
                                obj[key] = this.lists[idx].items[index][key]
                            }
                            select.push(obj)
                        }
                    })
                })
            }
            this.$emit('click', {
                item: obj,
                select: select
            })
        },

        getClineHeight() {
            uni.getSystemInfo({
                success: (res => {
                    this.clientHeight = res.windowHeight - uni.upx2px(80)
                })
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.uni-indexed-list {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
}

.uni-indexed-list__scroll {
    flex: 1;
}

.uni-indexed-list__menu {
    width: 24px;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
}

.uni-indexed-list__menu-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    // flex: 1;
    margin-top: 4rpx;
    align-items: center;
    justify-content: center;
    /* #ifdef H5 */
    cursor: pointer;
    /* #endif */
}

.uni-indexed-list__menu-text {
    font-size: 12px;
    text-align: center;
    color: #aaa;
}

.uni-indexed-list__menu--active {
    // background-color: rgb(200, 200, 200);
}

.uni-indexed-list__menu--active {}

.uni-indexed-list__menu-text--active {
    width: 16px;
    height: 16px;
    border-right: 4px solid #2576f0;
    line-height: 16px;
   color:#007aff;
}

.uni-indexed-list__alert-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.uni-indexed-list__alert {
    width: 80px;
    height: 80px;
    border-radius: 80px;
    text-align: center;
    line-height: 80px;
    font-size: 35px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}
</style>

